<template>
  <div class="file-list" v-if="fileList?.length > 0">
    <span
      v-for="(item, index) in fileList"
      :key="index"
      :title="`${item.fileName}${item.fileType ? '.' + item.fileType : ''}`"
      class="file-item"
    >
      <a
        style="color: #307AFA; overflow: hidden; white-space: nowrap"
        href="#"
        @click="downFile(item)"
      >
        <DFSvgIcon class="iconfon-l" :name="'fujian'" />

        {{ item.fileName }}.{{ item.fileType }}
      </a>
      <i class="iconfont iconfon-r icon-chaicon" @click.stop="delFileFn(index)">X</i>
    </span>
  </div>
</template>
<script lang="ts" setup name="DFFileList">
  // import { downLoadFile } from '@/api/basicConfiguration/deviceInfo';

  type Props = {
    machineAttachmentList: any;
  };

  const props = withDefaults(defineProps<Props>(), {
    machineAttachmentList: () => [],
  });

  const fileList: any = ref([]);

  const emit = defineEmits(['getFileListFn']);

  const delFileFn = (index) => {
    fileList.value.splice(index, 1);
    emit('getFileListFn', fileList.value);
  };

  const downFile = (_file) => {
    // downLoadFile({
    //   fileUrl: file.fileUrl,
    //   fileName: `${file.fileName}.${file.fileType}`,
    // }).catch((err) => {
    //   console.log('downloadErr', err);
    // });
  };

  watch(
    props,
    (newVal: any) => {
      fileList.value = newVal.machineAttachmentList;
    },
    {
      immediate: true,
      deep: true,
    }
  );
</script>
<style lang="less" scoped>
  .file-list {
    padding-top: 16px;
    .file-item {
      position: relative;
      padding: 0 36px 0 12px !important;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 260px;
      background: #f2f2f2;
      display: inline-block;
      height: 32px;
      margin-bottom: 8px;
      font-size: 14px;
      font-weight: 400;
      line-height: 32px;
      margin-right: 12px;
      cursor: pointer;
      &:hover {
        color: #307AFA;
        .iconfon-l {
          color: #307AFA;
        }
      }
      .iconfon-l {
        color: #307AFA;
        font-size: 16px;
        // margin-right: 4px;
        display: inline-block;
        &.fujian {
          display: inline-block;
        }
      }
      .iconfon-r {
        color: #666;
        font-size: 12px;
        margin-left: 12px;
        cursor: pointer;
        position: absolute;
        z-index: 999;
        right: 12px;
        top: 1px;
        cursor: pointer;
        &:hover {
          color: crimson;
        }
      }
    }
  }

  .iconfon-l {
    color: #307AFA !important;
  }

  // .file-warp {
  //   // position: relative;
  // }

  .file-arr {
    padding-top: 0;
    // position: absolute;
    // left: 57px;
    // top: -35px;
    display: flex;
    align-items: center;

    .file-item {
      margin-left: 10px;
    }
  }
</style>
